import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Button from '@kuiper-components/button';
import Dialog from '@kuiper-components/dialog';
import Table from '@kuiper-components/page-table';

import CopyBoard from '../../../../../../../components/CopyBoard';
import {
	CONTENT_IDX_LABEL_MAP,
	WARNING_CATEGORY_KEY_LABEL_MAP,
} from '../../../../../../../../common/constants';
import s from './style.module.css';

function EventDetail({ className, warning, taskId, category, cydEnabled }) {
	const [visible, setVisible] = React.useState(false);
	const tableData = Object.entries(warning?.detail).map(([key, info]) => ({
		key,
		info,
	}));

	const contentBuilder = warning => {
		switch (warning.category) {
			case 'keyword':
			case 'privacy_disclosure':
				return (
					<Table
						className={s.table}
						type="local"
						columns={[
							{
								title: `${WARNING_CATEGORY_KEY_LABEL_MAP.content[category]}类型`,
								dataIndex: 'key',
								render: key => CONTENT_IDX_LABEL_MAP?.[category]?.[key],
							},
							{
								title: '详情',
								dataIndex: 'info',
								className: s.info,
								render: info => info.join('、'),
							},
						]}
						data={tableData}
						pagination={{ show: false }}
					/>
				);

			default:
				return <div></div>;
		}
	};

	return (
		<>
			<Button
				className={cn(className, s.eventDetail)}
				link
				primary
				onClick={() => setVisible(true)}
			>
				查看详情
			</Button>
			<Dialog
				title={`${WARNING_CATEGORY_KEY_LABEL_MAP.content[category]}详情`}
				visible={visible}
				onClose={() => setVisible(false)}
			>
				<div className={s.content}>
					<div className={s.row}>
						<span>风险地址:</span>
						<CopyBoard text={warning?.affects} className={s.affects} />
					</div>
					{contentBuilder(warning)}
					<div className={s.btnContainer}>
						<Button size="small" onClick={() => setVisible(false)}>
							关闭
						</Button>
						{/* {cydEnabled && (
							<AddYunaqBlacklist
								size="small"
								taskId={taskId}
								warningId={warning._id}
								onOk={() => setVisible(false)}
							/>
						)} */}
					</div>
				</div>
			</Dialog>
		</>
	);
}

EventDetail.propTypes = {
	className: PropTypes.string,
	warning: PropTypes.object,
	cydEnabled: PropTypes.bool,
	category: PropTypes.string,
	taskId: PropTypes.string.isRequired,
};
EventDetail.defaultProps = {
	className: '',
};

export default EventDetail;
